<template>
<div>
    <el-upload
        class="avatar-uploader"
        action="http://upload-z1.qiniup.com/"
        :show-file-list="false"
        :data="ddata"
        :on-success="handleSuccess"
        :before-upload="beforeUpload">
        <el-button @click="upload">点击上传</el-button>
        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" @click="upload"> -->
        <!-- <i v-else class="el-icon-plus avatar-uploader-icon" @click="upload"></i> -->
    </el-upload>
    <!-- <img :src="showurl" width="600px" height="260px"/> -->
</div>
</template>
<script>
import axios from 'axios'
export default{
    data(){
        return{
            imageUrl:'',
            showurl:"",
            ddata:{
                key:"",
                token:""
            },
            fileList:[]
        };
    },
    methods:{
        handleSuccess(res,file){
            this.imageUrl=URL.createObjectURL(file.raw);
            this.showurl="http://rk7j5i2tg.hb-bkt.clouddn.com/"+res.key;
        },
        beforeUpload(file){
            const isJPG=file.type==='image/jpeg';
            const isLt2M=file.size/1024/1024<2;
            if(!isJPG){
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M){
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG&&isLt2M;
        },
        upload(){
            axios.get("/chain-api/test/upload/lisi233").then(res=>{
                this.ddata.token=res.data.data.token;
                this.ddata.key=res.data.data.fname;
                console.log(res);
            });
        }
    }
}
</script>
<style>
.avatar-uploader .el-upload{
    border:1px dashed #d9d9d9;
    border-radius:6px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
}
.avatar-uploader .el-upload:hover{
    border-color:#409EFF;
}
.avatar-uploader-icon{
    font-size:28px;
    color:#8c939d;
    width:178px;
    height:178px;
    line-height:178px;
    text-align:center;
}
.avatar{
    width:178px;
    height:178px;
    display:block;
}
</style>